<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>实名审核</title>
  <link rel="stylesheet" href="/static/assets/libs/layui/css/layui.css"/>
  <link rel="stylesheet" href="/static/assets/module/admin.css?v=318"/>
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      
      <!-- 表格工具栏 -->
      <form class="layui-form toolbar">
        <div class="layui-form-item">
          <!--搜索区域-->
          <div class="layui-inline">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-inline" style="width: 300px;">
              <input name="username" class="layui-input" placeholder="输入用户名"/>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">手机号：</label>
            <div class="layui-input-inline" style="width: 300px;">
              <input name="tel" class="layui-input" placeholder=""/>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">真实名称：</label>
            <div class="layui-input-inline" style="width: 300px;">
              <input name="real_name" class="layui-input" placeholder="输入用户名"/>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">审核状态：</label>
            <div class="layui-input-inline" style="width: 300px;">
              <select name="status">
                <option value="">请选择</option>
                <option value=0>待审核</option>
                <option value=1>已通过</option>
                <option value=2>已拒绝</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">&emsp;
            <button class="layui-btn icon-btn" lay-filter="TbSearch" lay-submit>
              <i class="layui-icon">&#xe615;</i>搜索
            </button>
          </div>
          <!--搜索区域结束-->
        </div>
      </form>
      <!-- 数据表格 -->
      <table id="Table" lay-filter="Table"></table>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="TbBar">
  <a class="layui-btn layui-btn-xs" lay-event="audit">审核</a>
  <a class="layui-btn layui-btn-xs  layui-btn-danger icon-btn" lay-event="delete">删除</a>
</script>

<!--审核 Model-->
<script type="text/html" id="AuditModel">
  <form id="AuditForm" lay-filter="AuditForm" class="layui-form model-form" action="POST">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
      <label class="layui-form-label layui-form-required">审核结果:</label>
      <div class="layui-input-block">
        <input type="radio" name="status" value="1" title="通过" checked>
        <input type="radio" name="status" value="2" title="拒绝">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">审核备注:</label>
      <div class="layui-input-block">
        <input name="reason" placeholder="" class="layui-input"/>
      </div>
    </div>
        <div class="layui-form-item text-right">
      <button class="layui-btn" lay-filter="AuditFormSubmit" lay-submit>保存</button>
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
    </div>
  </form>
</script>
<!-- js部分 -->
<script type="text/javascript" src="/static/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="/static/assets/js/common.js?v=318"></script>
<script>
  layui.use(['layer', 'form', 'table', 'util', 'admin', 'laydate'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var admin = layui.admin;
    var laydate = layui.laydate;

    /* 渲染表格 */
    var insTb = table.render({
      elem: '#Table',
      url: "{:url('admin/main/userAuth')}",
      method: 'post',
      page: true,
      limit: 20,
      toolbar: ['<p>','</p>'].join(''),
      cellMinWidth: 100,
      cols: [[
        {type: 'checkbox'},
        // 表格字段开始
        {field: 'id', title: 'ID', width: 20},
        {field: 'username', title: '用户名称', width: 90},
        {field: 'avatar', title: '头像', width: 100, templet: function(d) {
          return '<img src="'+d.avatar+'" style="width: 80px;height: 80px;"/>';
        }},
        {field: 'tel', title: '手机号', width: 100},
        {field: 'real_name', title: '真实姓名', width: 90},
        {field: 'id_number', title: '证件号码', width: 180},
        {field: 'id_card_front', title: '身份证图片', width: 400, templet: function(d){
          if(d.id_card_front) {
            return '<img src="'+d.id_card_front+'" style="width: 120px;height: 120px;"/>';
          }
          if(d.id_card_back) {
            return '<img src="'+d.id_card_back+'" style="width: 120px;height: 120px;"/>';
          }
          return '';
        }},
        {field: 'status', title: '审核状态', templet: function(d) {
          if(d.status == 0) {
            return '未审核';
          }
          if(d.status == 1) {
            return '已通过';
          }
          if(d.status == 2) {
            return '已驳回';
          }
          return '';
        }},
        {field: 'reason', title: '审核备注'},
        {title: '操作', toolbar: '#TbBar', align: 'center', width: 180}
      ]]
    });

    /* 表格搜索 */
    form.on('submit(TbSearch)', function (data) {
      insTb.reload({where: data.field, page: {curr: 1}});
      return false;
    });

    /* 表格工具条点击事件 */
    table.on('tool(Table)', function (obj) {
      if (obj.event === 'audit') { // 审核
        showAuditModel(obj.data)
      }

      if (obj.event === 'delete') { // 审核
        showDeleteModel(obj.data)
      }
    });
    
    /**
     * 显示删除对话框
     */
    function showDeleteModel(mData) {
 
        if(layer.confirm("确认删除吗？", function(){
            var loadIndex = layer.load(2);
            let url = "{:url('admin/main/delUser')}";
            $.post(url, {id: mData.id}, function (res) {
              layer.close(loadIndex);
              if (res.code === 200) {
                layer.close(loadIndex);
                layer.msg(res.msg, {icon: 1});
                insTb.reload({page: {curr: 1}});
              } else {
                layer.msg(res.msg, {icon: 2});
              }
            }, 'json');
            return false;
        }));
    }

    /* 审核 */
    function showAuditModel(mData) {
      console.log(mData);
      
      if(mData.status > 1) {
        layer.msg('已审核，请勿重复操作');
        return false;
      }
      
      admin.open({
        type: 1,
        title: "实名认证审核",
        content: $('#AuditModel').html(),
        area: '500px',
        offset: 'auto',
        success: function (layero, dIndex) {
          laydate.render({
            elem: '#out_time',
            type: 'datetime'
          });
          // 回显表单数据
          form.val('AuditForm', mData);
          // 表单提交事件
          form.on('submit(AuditFormSubmit)', function (data) {
            var loadIndex = layer.load(2);
            let url = "{:url('admin/main/auditUser')}";
            $.post(url, data.field, function (res) {
              layer.close(loadIndex);
              if (res.code === 200) {
                layer.close(dIndex);
                layer.msg(res.msg, {icon: 1});
                insTb.reload({page: {curr: 1}});
              } else {
                layer.msg(res.msg, {icon: 2});
              }
            }, 'json');
            return false;
          });
          $(layero).children('.layui-layer-content').css('overflow', 'visible');
        }
      });
    }
  });
</script>
</body>
</html>
